<template>
  <div class="bat-search" :style="{ width: width }">
    <span class="el-icon-search icon" @click="search"></span>
    <input v-model="keyword" type="text" class="input" @keyup.enter="search" />
  </div>
</template>
<script>
export default {
  name: "BatSearch",
  data() {
    return {
      keyword: null,
    };
  },
  props: {
    width: {
      type: String,
      default: "200px",
    }
  },
  methods: {
    search() {
      this.$emit("search", this.keyword);
    },
  },
};
</script>
<style scoped lang="scss">
.bat-search {
  //   z-index: 1000;
  //border:1px solid #ccc;
  //border-radius: 40px;
  height: 30px;
  .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: #eff3f6;
    vertical-align: middle;
    line-height: 30px;
    padding: 0 10px;
    cursor: pointer;
  }
  .input {
    display: inline-block;
    width:calc(100% - 30px);
    height: 30px;
    background-color: #eff3f6;
    border: 0px;
    outline-width: 0px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    padding-right: 15px;
    //   vertical-align: middle;
  }
}
</style>